import { memo, useRef } from "react"
import { IconBoxPropType } from "./types"
import styles from './styles.module.less'
import { useAppDispatch, useAppSelector, useClickType } from "@/utils/hooks";
import { getClassNames, Icon, useData } from "magic-ui-react";
import { appConfigActions } from "@/store/appConfigSlice";
import _ from "lodash";
import { offActions } from "@/store/offSlice";
import { appContextMenuOpen, AppContextMenuOpenPropsType } from "@/utils/tools/doms";
import ContentMenuDefaultItem from "../ContentMenuDefaultItem";

const AppBox = (props: IconBoxPropType) => {

  const {
    typeProps,
    positionIndex,
  } = props

  const dispatch = useAppDispatch()

  const {
    box,
    page,
    systemSettins,
  } = useAppSelector((state) => state.appConfig);

  const {
    edit,
  } = useAppSelector((state) => state.off);

  const {
    radius,
    shadow
  } = box

  const iconBoxRef = useRef<HTMLDivElement>(null)

  useClickType(iconBoxRef, {
    callback: (clickType) => {
      if (clickType === 'longPress') {
      }
    }
  })

  /**
   * 图标右键
   * @returns ReactNode
   */
  const contentMenusRender: AppContextMenuOpenPropsType['content'] = (appContextMenuClose) => {
    return (
      <>
        <ContentMenuDefaultItem
          icon="edit"
          onClick={() => {
            dispatch(offActions.update({
              edit: true
            }))
            appContextMenuClose()
          }}
        >
          编辑
        </ContentMenuDefaultItem>
        <ContentMenuDefaultItem
          icon="trash-can"
          onClick={() => {
            closeFn()
            appContextMenuClose()
          }}
        >
          删除
        </ContentMenuDefaultItem>
      </>
    )
  }

  const goto = () => {
    window.open(typeProps.harf)
  }

  const contentRender = () => {
    return (
      <img
        alt="ascas"
        style={{
          width: '50%',
          height: '50%'
        }}
        src={typeProps.icon}
      />
    )
  }

  /**
   * 删除图标
   */
  const closeFn = (e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    e?.stopPropagation();
    let newList: any = [...(page.boxs as any)[page.currentPage].list]
    newList[positionIndex] = null!
    newList = _.compact(newList)
    dispatch(appConfigActions.updataPageBoxList(newList))
  }

  const closeComp = edit && (
    <div className={styles.close} onClick={closeFn}>
      <Icon icon="xmark" />
    </div>
  )

  return (
    <li
      style={{
        gridColumn: `span 1`,
        gridRow: `span 1`,
      }}
    >
      <div
        className={getClassNames([
          styles.AppBox,
          {
            [styles.AppBoxEdit]: edit,
          }
        ])}
        ref={iconBoxRef}
      >
        <div
          className={getClassNames([
            styles.box,
            {
              [styles.shadowHover]: shadow.show === 'hover' && systemSettins.iconShadow,
              [styles.shadowAlways]: shadow.show === 'always' && systemSettins.iconShadow,
              [styles.transformHover]: systemSettins.iconAnimation,
            }
          ])}
          style={{
            borderRadius: `${radius}px`,
            boxShadow: `${shadow.h}px ${shadow.w}px ${shadow.blur}px ${shadow.spread}px var(--design-rgba-distant)`,
          }}
          onClick={() => {
            goto()
          }}
          onContextMenu={(e) => {
            e.stopPropagation()
            e.preventDefault()
            appContextMenuOpen(e, contentMenusRender)
          }}
        >
          {contentRender()}
        </div>
        {closeComp}
      </div>
      {!systemSettins.hiddenIconName && (
        <div className={styles.title}>
          {typeProps.title}
        </div>
      )}
    </li>

  )
}

export default memo(AppBox) 